<template>
	<view :style="{'--color':color,'padding-top':`${totalHeight}px`}">
		<image :src="$staticImg('login_bg.png')" mode="widthFix" class="rows "></image>
		<!-- #ifdef MP-WEIXIN -->
		<view class="viewbox auto m-top50 d-flex f-column a-center">
			<text class="titke">需要授权手机号，以便您下次直接登录</text>
			<text class="titke">请放心，我们将严格保护您的隐私</text>
			<view class="btns Phone">
				<text>手机号快捷登录</text>
				<button class="btnbut" open-type="getPhoneNumber" @getphonenumber="getphonenumber"></button>
			</view>
			<view class="btns accredit" @click="$back()">暂不授权</view>
		</view>
		<!-- #endif -->

		<view class="Login">
			<view class="tapList">
				<image :src="$staticImg('l1.png')" class="iconImg"></image>
				<input type="number" v-model="phone" class="Input" placeholder="请输入手机号" />
			</view>
			<view class="tapList">
				<image :src="$staticImg('l4.png')" class="iconImg"></image>
				<input type="number" v-model="verCode" class="Input" placeholder="请输入验证码" />
				<view class="code" @click="getCode">{{codeState}}</view>
			</view>
			<view class="btns Phone" @click="loginBtn">登录/注册</view>
			<view class="btns accredit" @click="$back()">暂不登录</view>
		</view>

	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				phone: '',
				verCode: '',
				gainCode: null,
				codeFlag: true,
				Time: 60,
			}
		},
		methods: {
			...mapMutations(['getUser']),
			loginBtn() {
				if (!this.phone) return this.$Toast('请输入手机号码');
				if (this.phone && !this.$reg.phone.test(this.phone)) return this.$Toast('手机号码输入有误');
				if (!this.verCode) return this.$Toast('请输入验证码');
				this.$http.post({
					url: '/zzj_singleSaleApi/fastLogin',
					data: {
						phone: this.phone,
						verCode: this.verCode,
						openid: this.openid,
						reg: 1
					},
				}).then(res => {
					if (res.errcode != '100') return this.$Toast(res.msg);
					this.getUser({ 'vid': res.v_id });
					uni.setStorageSync('vid', res.v_id);
					this.$Toast(res.msg, 2);
				})
			},
			getCode() {
				let that = this;
				if (!this.phone) return this.$Toast('请输入手机号码');
				if (this.phone && !this.$reg.phone.test(this.phone)) return this.$Toast('手机号码输入有误');
				if (!this.codeFlag) return;
				this.codeFlag = false;
				this.$http.post({
					url: '/zzj_singleSaleApi/verCode',
					data: {
						phone: this.phone
					}
				}).then(res => {
					if (res.errcode != '00000') return this.$Toast(res.msg);
					this.gainCode = setInterval(() => {
						if (this.Time > 1) {
							this.Time--;
						} else {
							this.codeFlag = true;
							this.Time = 60;
							clearInterval(this.gainCode)
						}
					}, 1000)
				})
			},
			getphonenumber(e) {
				const result = e.detail;
				this.$http.post({
					url: '/zzj_singleSaleApi/appletDecodePhone',
					data: {
						encryptedData: result.encryptedData,
						iv: result.iv,
						session_key: this.session_key
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg);
					this.Login(res.data);
				})
			},

			Login(purePhoneNumber) {
				this.$http.post({
					url: '/zzj_singleSaleApi/appletLogin',
					data: {
						openid: this.openid,
						nickName: '-',
						headimg: '',
						purePhoneNumber,
						share_v_id: this.share_v_id
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg);
					let obj = {
						vid: res.v_id,
						userInfo: res.userInfo
					}
					this.getUser(obj);
					uni.setStorageSync('vid', res.v_id);
					this.$Toast(res.msg, 2)
				})
			}
		},
		computed: {
			...mapState(['color', 'totalHeight', 'session_key', 'openid', 'share_v_id']),
			codeState() {
				if (this.codeFlag) {
					return '获取验证码'
				} else {
					return `重新发送 ${this.Time}s`
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $pageBg;
	}
</style>
<style lang="scss" scoped>
	.titke {
		color: #999;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.btns {
		width: 550rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.Phone {
		background-color: var(--color);
		color: #ffffff;
		font-size: 32rpx;
	}

	.accredit {
		font-size: 32rpx;
		color: #999;
	}

	.accredit::after {
		content: " ";
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid rgba(0, 0, 0, .2);
		-webkit-transform: scale(.5);
		transform: scale(.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		box-sizing: border-box;
		border-radius: 40px;
	}

	.btnbut {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
		background-color: transparent;
		border: none;
	}

	.btnbut::after {
		border: none;
	}

	.Login {
		width: 620rpx;
		padding: 30rpx;
		// box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(153,153,153,0.24);
		margin: 0 auto;
		border-radius: 10rpx;
	}

	.tapList {
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid rgba(228, 228, 228, .5);
		display: flex;
		align-items: center;
	}

	.iconImg {
		width: 42rpx;
		height: 42rpx;
	}

	.Input {
		flex: 1;
		height: 100%;
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.code {
		color: var(--color);
		font-size: 28rpx;
	}
</style>